<template>
	<!-- 主容器，根据isDark状态切换暗黑模式 -->
	<view class="sensor-container" :class="{ dark: isDark }">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack"><</view>
			<!-- 页面标题 -->
			<view class="nav-title">传感器数据</view>
		</view>

		<!-- 可滚动的传感器数据网格 -->
		<scroll-view scroll-y class="sensor-grid">
			<!-- 传感器卡片循环 -->
			<view class="sensor-card" v-for="(sensor, index) in sensors" :key="index">
				<!-- 卡片头部区域 -->
				<view class="card-header">
					<!-- 传感器图标，使用渐变色背景 -->
					<view class="card-icon" :style="{ background: sensor.color }">{{ sensor.icon }}</view>
					<!-- 传感器标题和状态 -->
					<view class="card-title-group">
						<text class="card-title">{{ sensor.name }}</text>
						<!-- 状态标签，根据状态显示不同颜色 -->
						<text class="card-status" :class="[sensor.status === '正常' ? 'ok' : 'warn']">
							{{ sensor.status }}
						</text>
					</view>
				</view>
				<!-- 卡片数据区域 -->
				<view class="card-body">
					<!-- 循环显示传感器的各项数据 -->
					<view class="data-item" v-for="(item, key) in sensor.data" :key="key">
						<text class="data-label">{{ key }}</text>
						<text class="data-value">{{ item.value }} <text class="data-unit">{{ item.unit }}</text></text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 传感器数据数组，包含各种传感器的信息
			sensors: [
				{ 
					name: '陀螺仪', 
					icon: '🧭', 
					color: 'linear-gradient(135deg, #6a82fb, #fc5c7d)', 
					status: '正常', 
					data: { 
						'X轴': { value: 0, unit: '°/s' }, 
						'Y轴': { value: 0, unit: '°/s' }, 
						'Z轴': { value: 0, unit: '°/s' } 
					} 
				},
				// 其他传感器数据...
			],
			// 数据更新定时器
			updateTimer: null,
			// 是否暗黑模式标志
			isDark: false
		};
	},
	
	// 页面显示生命周期钩子
	onShow() {
		// 从全局获取暗黑模式设置
		const dark = getApp().globalData.darkMode;
		this.isDark = dark;
	
		// 根据暗黑模式设置界面样式
		if (dark) {
			// 暗黑模式下的tabBar样式
			uni.setTabBarStyle({
				backgroundColor: '#1e1e1e',
				borderStyle: 'black',
				color: '#999999',
				selectedColor: '#ffffff'
			});
			// 暗黑模式下的导航栏样式
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#1e1e1e'
			});
		} else {
			// 亮色模式下的tabBar样式
			uni.setTabBarStyle({
				backgroundColor: '#ffffff',
				borderStyle: 'black',
				color: '#7A7E83',
				selectedColor: '#fb7e29'
			});
			// 亮色模式下的导航栏样式
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#F8F8F8'
			});
		}
	},
	
	// 页面加载生命周期钩子
	onLoad() {
		// 开始数据更新
		this.startDataUpdate();
	},
	
	// 页面卸载生命周期钩子
	onUnload() {
		// 清除定时器
		clearInterval(this.updateTimer);
	},
	
	methods: {
		/**
		 * 返回上一页
		 */
		goBack() {
			uni.switchTab({
				url: '/pages/data/data'  // 切换到数据页
			});
		},
		
		/**
		 * 开始数据更新定时器
		 */
		startDataUpdate() {
			// 设置2秒间隔的定时器
			this.updateTimer = setInterval(() => {
				// 模拟陀螺仪数据更新
				this.sensors[0].data['X轴'].value = (Math.random() * 2 - 1).toFixed(2);
				this.sensors[0].data['Y轴'].value = (Math.random() * 2 - 1).toFixed(2);

				// 模拟超声波数据更新
				this.sensors[1].data['前方距离'].value = (100 + Math.random() * 50).toFixed(0);

				// 模拟电池电压数据更新
				this.sensors[3].data['当前电压'].value = (11.8 + Math.random() * 0.5).toFixed(2);

				// 请求Java后端获取烟雾传感器数据
				uni.request({
					url: 'http://192.168.0.20:8080/smoke/get', // Java后端API地址
					method: 'GET',
					success: (res) => {
						// 请求成功处理
						if (res.data.code === 1 && res.data.data) {
							const smoke = res.data.data;
							// 更新烟雾传感器数据
							this.sensors[5].data['电压'].value = smoke.voltage;
							this.sensors[5].data['浓度'].value = smoke.ppm.toFixed(0);
							// 根据浓度设置状态
							this.sensors[5].status = smoke.ppm > 1000 ? '异常' : '正常';
						}
					},
					fail: (err) => {
						// 请求失败处理
						console.error('获取烟雾数据失败:', err);
						this.sensors[5].status = '异常';
					}
				});
			}, 2000); // 2秒间隔
		}
	}
}
</script>
<style lang="scss">
// 导入公共样式
@import "@/common/page-style.scss";

// 传感器网格容器样式
.sensor-grid {
	padding: 32rpx;
	height: calc(100vh - 100rpx - 44px); // 计算高度，考虑导航栏
}

// 传感器卡片样式
.sensor-card {
	background: #fff;
	border-radius: 40rpx; // 圆角
	padding: 40rpx;
	margin-bottom: 32rpx; // 卡片间距
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.08); // 阴影效果
	transition: all 0.3s ease; // 过渡动画
	&:active {
		transform: scale(1.02); // 点击放大效果
		box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.12); // 点击时阴影加深
	}
}

// 卡片头部样式
.card-header {
	display: flex;
	align-items: center;
	margin-bottom: 32rpx; // 与内容间距
}

// 卡片图标样式
.card-icon {
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%; // 圆形
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx; // 图标大小
	margin-right: 24rpx; // 与标题间距
}

// 卡片标题组样式
.card-title-group {
	.card-title {
		font-size: 36rpx;
		font-weight: 600; // 加粗
		color: #333;
	}
	.card-status {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		// 正常状态样式
		&.ok { 
			background-color: rgba(46, 213, 115, 0.1); // 浅绿色背景
			color: #2ed573; // 绿色文字
		}
		// 警告状态样式
		&.warn { 
			background-color: rgba(255, 107, 53, 0.1); // 浅红色背景
			color: #ff6b35; // 红色文字
		}
	}
}

// 卡片内容区域样式
.card-body {
	display: grid;
	grid-template-columns: repeat(2, 1fr); // 两列网格
	gap: 24rpx; // 网格间距
}

// 数据项样式
.data-item {
	background: #f8f9fa; // 浅灰色背景
	padding: 24rpx;
	border-radius: 24rpx;
	.data-label {
		display: block;
		font-size: 24rpx;
		color: #666; // 灰色文字
		margin-bottom: 8rpx; // 与值间距
	}
	.data-value {
		font-size: 36rpx;
		font-weight: 700; // 加粗
		color: #333;
	}
	.data-unit {
		font-size: 24rpx;
		font-weight: 500;
		color: #999; // 浅灰色单位
		margin-left: 8rpx; // 与值间距
	}
}

/* 暗黑模式样式 */
.sensor-container.dark {
	background: #121212; // 深色背景

	.nav-bar {
		background: #1e1e1e; // 深色导航栏
		box-shadow: none;

		.nav-back,
		.nav-title {
			color: #fff; // 白色文字
		}
	}

	.sensor-card {
		background: #1e1e1e; // 深色卡片
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2); // 深色阴影
	}

	.card-title-group {
		.card-title {
			color: #fff; // 白色标题
		}
	}

	.card-body .data-item {
		background: #2a2a2a; // 更深色背景

		.data-label {
			color: #aaa; // 浅灰色标签
		}

		.data-value {
			color: #fff; // 白色数值
		}

		.data-unit {
			color: #888; // 灰色单位
		}
	}
}
</style>